import React, { useState, useRef, useEffect } from "react";
import { gsap } from "gsap";
import "./LLMPanel.css";

interface LLMPanelProps {
  isVisible: boolean;
  onClose: () => void;
  onSendMessage: (message: string) => void;
}

const LLMPanel: React.FC<LLMPanelProps> = ({
  isVisible,
  onClose,
  onSendMessage,
}) => {
  const [message, setMessage] = useState("");
  const [isTyping, setIsTyping] = useState(false);
  const [messages, setMessages] = useState<
    Array<{ id: number; text: string; isUser: boolean; timestamp: Date }>
  >([]);
  const panelRef = useRef<HTMLDivElement | null>(null);
  const messagesEndRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (panelRef.current) {
      if (isVisible) {
        // 显示时：从右侧滑入
        gsap.fromTo(
          panelRef.current,
          {
            x: "100%",
            opacity: 0,
          },
          {
            x: 0,
            opacity: 1,
            duration: 0.4,
            ease: "power2.out",
          }
        );
      } else {
        // 隐藏时：滑出到右侧
        gsap.to(panelRef.current, {
          x: "100%",
          opacity: 0,
          duration: 0.3,
          ease: "power2.in",
        });
      }
    }
  }, [isVisible]);

  // 初始化时设置隐藏状态
  useEffect(() => {
    if (panelRef.current) {
      gsap.set(panelRef.current, {
        x: "100%",
        opacity: 0,
      });
    }
  }, []);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  const handleSendMessage = async () => {
    if (!message.trim()) return;

    const userMessage = {
      id: Date.now(),
      text: message,
      isUser: true,
      timestamp: new Date(),
    };

    setMessages((prev) => [...prev, userMessage]);
    setMessage("");
    setIsTyping(true);

    // 模拟 AI 回复
    setTimeout(() => {
      const aiMessage = {
        id: Date.now() + 1,
        text: "我理解您的需求。根据您的描述，我建议使用现代简约风格，配合温暖的色调来营造温馨的氛围。您希望我为您生成什么样的内容呢？",
        isUser: false,
        timestamp: new Date(),
      };
      setMessages((prev) => [...prev, aiMessage]);
      setIsTyping(false);
    }, 2000);

    onSendMessage(message);
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  return (
    <div className="llm-panel" ref={panelRef}>
      {/* 顶部标题栏 */}
      <div className="llm-header">
        <div className="llm-title">
          <button className="deepseek-btn" title="打开 AI 助手">
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              preserveAspectRatio="xMidYMid meet"
              fill="none"
              role="presentation"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g>
                <path
                  data-follow-fill="currentColor"
                  d="M22.28 5.447c-.223-.111-.32.1-.449.208-.044.035-.082.08-.12.121C20.1 7.531 17.2 6.881 16.478 4.61l-.054-.17c-.048-.142-.096-.287-.256-.312-.175-.027-.243.122-.312.247-.274.51-.38 1.072-.37 1.64.024 1.281.555 2.301 1.609 3.026.12.084.15.167.113.288-.072.25-.158.493-.233.743-.048.16-.12.194-.288.125a4.84 4.84 0 0 1-1.52-1.052c-.748-.739-1.426-1.554-2.271-2.192a9.995 9.995 0 0 0-.603-.42c-.862-.854.113-1.555.34-1.638.235-.087.081-.385-.682-.382-.763.004-1.461.264-2.35.611a2.66 2.66 0 0 1-.408.122 8.245 8.245 0 0 0-2.522-.09c-1.65.187-2.967.981-3.936 2.338-1.163 1.63-1.437 3.483-1.102 5.416.352 2.037 1.373 3.723 2.94 5.041 1.625 1.367 3.497 2.037 5.633 1.909 1.297-.077 2.74-.254 4.37-1.659.41.208.842.291 1.557.354.551.052 1.082-.028 1.492-.115.643-.138.599-.746.366-.857-1.885-.895-1.471-.53-1.848-.825.959-1.156 2.403-2.356 2.967-6.246.045-.308.007-.503 0-.752-.003-.153.03-.212.202-.23a3.588 3.588 0 0 0 1.352-.423c1.222-.68 1.715-1.797 1.831-3.136.018-.205-.003-.417-.216-.524ZM11.632 17.5c-1.827-1.464-2.714-1.946-3.08-1.925-.342.02-.28.42-.206.68.079.256.182.433.326.659.099.149.167.371-.1.538-.588.37-1.611-.125-1.66-.15-1.19-.714-2.186-1.658-2.888-2.949a9.134 9.134 0 0 1-1.136-3.997c-.017-.343.082-.465.417-.527a4.046 4.046 0 0 1 1.339-.035c1.865.278 3.453 1.128 4.784 2.474.76.767 1.335 1.683 1.927 2.578.63.95 1.307 1.856 2.17 2.599.304.26.547.458.78.603-.702.08-1.873.098-2.673-.548Z"
                  fill="currentColor"
                ></path>
              </g>
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="46"
              height="16"
              viewBox="0 0 46 16"
              fill="none"
            >
              <path
                d="M0.335938 12.0003L1.48794 3.80431H2.89194C4.39194 3.80431 7.76394 4.1643 7.22394 7.98031C6.69594 11.7123 3.25194 12.0003 1.75194 12.0003H0.335938ZM1.90794 11.6763C3.77994 11.5683 5.07594 10.1403 5.39994 7.83631C5.71194 5.60431 4.83594 4.24831 2.98794 4.12831L1.90794 11.6763Z"
                fill="currentColor"
              ></path>
              <path
                d="M9.00416 9.37231C8.78816 10.9683 9.16016 11.9043 10.0242 11.9043C10.5042 11.9043 11.0562 11.6763 11.3802 11.3883L11.4762 11.5323C10.9602 11.9883 10.3242 12.1923 9.61616 12.1923C8.09216 12.1923 7.33616 11.0523 7.60016 9.16831C7.85216 7.36831 8.92016 6.30031 10.4082 6.30031C11.7642 6.30031 12.6642 7.0563 12.4362 8.04031C12.2922 8.67631 11.4762 9.37231 9.00416 9.37231ZM10.5402 6.49231C9.84416 6.49231 9.24416 7.7403 9.02816 9.19231C10.3602 9.19231 11.0682 8.60431 11.1762 8.04031C11.3322 7.1883 11.0922 6.49231 10.5402 6.49231Z"
                fill="currentColor"
              ></path>
              <path
                d="M14.2073 9.37231C13.9913 10.9683 14.3633 11.9043 15.2273 11.9043C15.7073 11.9043 16.2593 11.6763 16.5833 11.3883L16.6793 11.5323C16.1633 11.9883 15.5273 12.1923 14.8193 12.1923C13.2953 12.1923 12.5393 11.0523 12.8033 9.16831C13.0553 7.36831 14.1233 6.30031 15.6113 6.30031C16.9673 6.30031 17.8673 7.0563 17.6393 8.04031C17.4953 8.67631 16.6793 9.37231 14.2073 9.37231ZM15.7433 6.49231C15.0473 6.49231 14.4473 7.7403 14.2313 9.19231C15.5633 9.19231 16.2713 8.60431 16.3793 8.04031C16.5353 7.1883 16.2953 6.49231 15.7433 6.49231Z"
                fill="currentColor"
              ></path>
              <path
                d="M17.6704 14.8203L18.8704 6.30031H20.3224L20.2384 6.81631C20.6224 6.48031 21.0544 6.30031 21.4384 6.30031C23.0104 6.30031 23.7064 7.36831 23.4304 9.32431C23.1544 11.2563 22.3144 12.1923 20.8144 12.1923C20.2744 12.1923 19.8544 12.0003 19.5664 11.6883L19.1224 14.8203H17.6704ZM19.6144 11.2203C19.9384 11.7483 20.2144 11.9163 20.6104 11.9163C21.1024 11.9163 21.5464 10.9563 21.7984 9.18031C22.0384 7.47631 21.8344 6.61231 21.2224 6.61231C20.9464 6.61231 20.6464 6.85231 20.1544 7.44031L19.6144 11.2203Z"
                fill="currentColor"
              ></path>
              <path
                d="M24.6159 5.67631C24.7959 4.39231 25.8399 3.6123 27.3759 3.6123C28.5399 3.6123 29.2959 4.1043 29.5719 4.92031L29.5359 4.8843L29.3559 4.95631C28.8999 4.34431 28.3119 3.96031 27.6639 3.96031C26.9559 3.96031 26.3199 4.63231 26.1999 5.50831C26.0559 6.51631 26.7039 7.02031 27.3639 7.56031C28.1319 8.12431 29.2479 9.13231 29.1039 10.1883C28.8999 11.6523 27.3279 12.1803 26.1279 12.1803C25.0239 12.1803 24.1959 11.6403 23.9199 10.8723L23.9559 10.9083L24.1599 10.8243C24.6279 11.4363 25.2759 11.8443 25.8399 11.8443C26.7879 11.8443 27.2799 11.4003 27.4119 10.4523C27.5079 9.74431 27.0879 9.04831 26.2359 8.38831C25.4439 7.83631 24.4239 7.0563 24.6159 5.67631Z"
                fill="currentColor"
              ></path>
              <path
                d="M31.1877 9.37231C30.9718 10.9683 31.3438 11.9043 32.2078 11.9043C32.6878 11.9043 33.2397 11.6763 33.5638 11.3883L33.6598 11.5323C33.1438 11.9883 32.5077 12.1923 31.7997 12.1923C30.2757 12.1923 29.5198 11.0523 29.7838 9.16831C30.0358 7.36831 31.1038 6.30031 32.5918 6.30031C33.9478 6.30031 34.8478 7.0563 34.6198 8.04031C34.4757 8.67631 33.6598 9.37231 31.1877 9.37231ZM32.7238 6.49231C32.0278 6.49231 31.4277 7.7403 31.2118 9.19231C32.5438 9.19231 33.2517 8.60431 33.3597 8.04031C33.5157 7.1883 33.2757 6.49231 32.7238 6.49231Z"
                fill="currentColor"
              ></path>
              <path
                d="M36.3909 9.37231C36.1749 10.9683 36.5469 11.9043 37.4109 11.9043C37.8909 11.9043 38.4429 11.6763 38.7669 11.3883L38.8629 11.5323C38.3469 11.9883 37.7109 12.1923 37.0029 12.1923C35.4789 12.1923 34.7229 11.0523 34.9869 9.16831C35.2389 7.36831 36.3069 6.30031 37.7949 6.30031C39.1509 6.30031 40.0509 7.0563 39.8229 8.04031C39.6789 8.67631 38.8629 9.37231 36.3909 9.37231ZM37.9269 6.49231C37.2309 6.49231 36.6309 7.7403 36.4149 9.19231C37.7469 9.19231 38.4549 8.60431 38.5629 8.04031C38.7189 7.1883 38.4789 6.49231 37.9269 6.49231Z"
                fill="currentColor"
              ></path>
              <path
                d="M40.238 12.0003L41.39 3.80431H42.926L42.206 8.90431L45.062 6.21631L45.314 6.49231L43.586 8.17231L44.882 12.0003H43.25L42.374 9.30031L42.122 9.52831L41.774 12.0003H40.238Z"
                fill="currentColor"
              ></path>
            </svg>
            {/* <svg
                      width="12"
                      height="12"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="arrow-icon"
                    >
                      <path
                        d="M9 18L15 12L9 6"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg> */}
          </button>
        </div>
        <button className="close-btn" onClick={onClose}>
        <svg width="16" height="16" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="none" role="presentation" xmlns="http://www.w3.org/2000/svg" className=""><g><path data-follow-fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M7 12a1 1 0 0 1 1-1h10.312L14.29 6.977a1 1 0 0 1 1.414-1.414l5.728 5.73a1 1 0 0 1 0 1.414l-5.728 5.73a1 1 0 1 1-1.414-1.414L18.31 13H8a1 1 0 0 1-1-1Zm-2.998 9a1 1 0 0 1-1-1L3 4a1 1 0 1 1 2 0l.002 16a1 1 0 0 1-1 1Z" fill="currentColor"></path></g></svg>
        </button>
      </div>

      {/* 主内容区域 */}
      <div className="llm-content">
        {messages.length === 0 ? (
          <div className="welcome-screen">
            {/* 发光星星图标 */}
            <div className="star-icon">
              <div className="star-glow"></div>
              <div className="star-core">⭐</div>
            </div>

            {/* 欢迎文字 */}
            <div className="welcome-text">
              <h2>Hi, 你好呀!</h2>
              <p>请把你的想法告诉我吧!</p>
            </div>
          </div>
        ) : (
          <div className="messages-container">
            {messages.map((msg) => (
              <div
                key={msg.id}
                className={`message ${msg.isUser ? "user" : "ai"}`}
              >
                <div className="message-content">
                  <div className="message-text">{msg.text}</div>
                </div>
              </div>
            ))}

            {isTyping && (
              <div className="message ai">
                <div className="message-content">
                  <div className="typing-indicator">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {/* 底部输入框 */}
      <div className="llm-input">
        <div className="input-container">
          <input
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="聊聊你的想法"
            className="message-input"
          />
          <button
            className="llm-send-btn"
            onClick={handleSendMessage}
            disabled={!message.trim() || isTyping}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 4L12 20M12 4L6 10M12 4L18 10"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
};

export default LLMPanel;
